<template>
    <div>
        <n-modal v-if="props.showModal" v-model:show="props.showModal" :mask-closable="true" @update:show="$emit('CheckShowModal', false)">
            <n-card style="width: 600px" title="编辑政策法规" :bordered="false" size="huge" role="dialog" aria-modal="true">
                <template #header-extra>
                    <n-button type="error" @click="$emit('CheckShowModal', false)">
                        X
                    </n-button>
                </template>
                <n-form ref="formRef" :model="model" :rules="rules">
          <n-form-item path="rTitle" label="名称">
            <n-input v-model:value="model.rTitle" placeholder="请输入名称" />
          </n-form-item>
          <n-form-item path="rDate" label="日期">
            <n-date-picker
              v-model:value="timeSet"
              type="datetime"
              clearable
              placeholder="请选择时间"
              @update:value="genxin"
            />
          </n-form-item>
          <n-form-item path="rContent" label="内容">
            <n-input v-model:value="model.rContent" placeholder="请输入内容" />
          </n-form-item>
          <UpLoad @filename="filename"></UpLoad>
                    <n-row :gutter="[0, 24]">
                        <n-col :span="24">
                            <div style="display: flex; justify-content:center">
                                <n-button round type="primary" @click="UpdateUserFile">
                                    修改
                                </n-button>
                            </div>
                        </n-col>
                    </n-row>
                </n-form>
            </n-card>
        </n-modal>
        <n-skeleton v-else text :repeat="2" /> <n-skeleton text style="width: 60%" />
    </div>
</template>

<script lang="ts" setup>
import { defineProps, ref, reactive, onMounted } from 'vue';
import { GetReguInfo, EditReguInfo} from "@/api/politics"
import UpLoad from "@/components/upload/UpLoad.vue";
const formRef = ref();
const emit = defineEmits(['CheckShowModal','reloadpage'])
const props = defineProps({
    showModal: {
        type: Boolean,
        default: false
    },
    userId:{
        type:Number,
        default:''
    }
})
const model = reactive({
    rId:0,
    rTitle :'',
    rContent: '',
    rDate :'',
    rImg:''
})
const params = reactive({
    rId:1
})
const filename = (val:any) => {
    model.rImg=val
}
const timeSet: any = ref(null);
const add0 = (m: any) => {
  return m < 10 ? "0" + m : m;
};
const timeData = (data: any) => {
  var time = new Date(data);
  var y = time.getFullYear();
  var m = time.getMonth() + 1;
  var d = time.getDate();
  var h = time.getHours();
  var mm = time.getMinutes();
  var s = time.getSeconds();
  model.rDate = `${y}-${add0(m)}-${add0(d)} ${add0(h)}:${add0(mm)}:${add0(s)}`;
};
const genxin = () => {
  timeData(timeSet.value);
};
onMounted(()=>{
    params.rId = props.userId
    model.rId=props.userId
    if(props.userId){
        GetReguInfo(params).then((res:any)=>{
        model.rTitle=res.data.rTitle;
        model.rContent = res.data.rContent
        model.rDate = res.data.rDate
        timeSet.value=Date.parse(model.rDate)
    })
    }
})


const rules = {
    uName: [
        {
            required: true,
            message: '请输入姓名',
            trigger: ['input', 'blur']
        }
    ],
    uPwd: [
        {
            required: true,
            message: '请输入密码',
            trigger: ['input', 'blur']
        },
    ],
    uTel: [
        {
            required: true,
            message: '请输入号码',
            trigger: ['input', 'blur']
        },
    ]
}

const UpdateUserFile = (e:Event) => {
    e.preventDefault()
    // console.log(model)
    formRef.value.validate((err:any)=>{
        if(err){
            console.log(err)
        }else{
           EditReguInfo(model).then((res: any) => {
                emit('CheckShowModal',false)
                emit('reloadpage')
            })
        }
    })
}
</script>

<style scoped lang=scss>

</style>